<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>grid resize tha div, yo!</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		
		<script type="text/javascript">
		<!--
			var curHeight=0
			var curPos=0
			var newPos=0
			var mouseStatus='up'
			
			// Rubn edit
			var vGrid = 40
			var minHeight = 40
			var maxHeight = 500
			
			function setPos( e )
			{
				curevent=(typeof event=='undefined'?e:event)
				mouseStatus='down'
				curPos=curevent.clientY
				tempHeight=document.getElementById('mydiv').style.height
				heightArray=tempHeight.split('p')
				curHeight=parseInt(heightArray[0])
			}
			
			function getPos( e )
			{
				if(mouseStatus=='down'){
					curevent=(typeof event=='undefined'?e:event)
					newPos=curevent.clientY
					var pxMove=parseInt(newPos-curPos)
					var newHeight=parseInt(curHeight+pxMove)
					
					// Rubn edit
					newHeight=(newHeight<minHeight?minHeight:newHeight)
					newHeight=(newHeight>maxHeight?maxHeight:newHeight)
					newHeight = Math.round( newHeight / vGrid ) * vGrid;
			
					document.getElementById('mydiv').style.height=newHeight+'px'
				}
			}
		//-->
		</script>
		
		<style type="text/css">
			body {height:100%;}
			
			#mydiv
			{
				position:absolute;
				top:30px;
				left:10px;
				height: 240px;
				width:250px;
				border: 1px solid #808080;
				overflow: hidden;
			}
			
			p
			{
				margin: 0;
				padding: 10px;
			}
		
			#dragbar
			{
				cursor: s-resize;
				position:absolute;
				display:block;
				background-color: #c0c0c0;
				top:100%;
				margin-top:-5px;
				height:5px;
				padding:0;
				width: 250px;
			}
		</style>
	</head>
	<body onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
		<div id="mydiv" style="height: 250px;" >
			<p>This is niiiice!</p>
			<div onmousedown="setPos(event)" id="dragbar" ></div>
		</div>
	</body>
</html> 